<template>
  <div class="coupon-item">
    <div class="coupon-price">
      <template v-if="coupon.discountType === 1 || coupon.discountType === 4">
        <span class="price">¥{{ coupon.discountValue / 100 }}</span>
      </template>
      <template v-else-if="coupon.discountType === 2">
        <span class="price">{{ coupon.discountValue / 10 }}折</span>
      </template>
      <template v-else-if="coupon.discountType === 3">
        <span class="price">¥{{ coupon.discountValue / 100 }}</span>
      </template>
    </div>
    <div class="coupon-info">
      <h3>{{ coupon.name }}</h3>
      <p v-if="coupon.discountType === 1">每满{{ coupon.thresholdAmount / 100 }}减{{ coupon.discountValue / 100 }}</p>
      <p v-else-if="coupon.discountType === 2">折扣{{ coupon.discountValue / 10 }}折</p>
      <p v-else-if="coupon.discountType === 3">无门槛减{{ coupon.discountValue / 100 }}</p>
      <p v-else-if="coupon.discountType === 4">满{{ coupon.thresholdAmount / 100 }}减{{ coupon.discountValue / 100 }}</p>
      <p>适用类型：{{ applicableType }}</p>
      <p>有效期至：{{ formatExpiryDate }}</p>
    </div>
    <el-button 
      type="primary" 
      @click="handleReceive" 
      :disabled="!coupon.available || coupon.received"
      v-if="coupon.available && !coupon.received">
      立即领取
    </el-button>
    <el-button 
      v-else-if="coupon.received"
      class="use-button"
      @click="goToCart">
      去使用
    </el-button>
    <el-button 
      type="info" 
      disabled 
      v-else>
      不可领取
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed } from 'vue'
import { CouponVO } from '@/type/coupon'
import { useRouter } from 'vue-router'

const props = defineProps({
  coupon: {
    type: Object as () => CouponVO,
    required: true
  }
})

const emit = defineEmits(['received', 'receive'])
const router = useRouter()

const handleReceive = () => {
  emit('receive', props.coupon.id)
  // 保持向后兼容
  emit('received', props.coupon.id)
}

const goToCart = () => {
  router.push('/shoppingcart')
}

// 时间格式化方法
const formatDate = (dateStr: string | null): string => {
  if (!dateStr) return '未知';

  const date = new Date(dateStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const formatExpiryDate = computed(() => {
  return formatDate(props.coupon.termEndTime);
})

const applicableType = computed(() => {
  if (props.coupon.specific) {
    return '指定商品';
  } else {
    return '全场通用';
  }
})
</script>

<style scoped>
.coupon-item {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  width: 48%; /* 每行两个优惠券 */
  box-sizing: border-box;
  margin: 10px;
}

.coupon-price {
  background-color: rgb(236,128,141);
  color: #fff;
  padding: 20px;
  border-radius: 75px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  text-align: center;
  width: 30%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
}

.price {
  font-size: 24px;
  font-weight: bold;
}

.coupon-info {
  flex: 1;
  padding: 0 10px;
}

.coupon-info h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.coupon-info p {
  margin: 5px 0;
  font-size: 12px;
  color: #666;
}

.el-button {
  margin-left: 10px;
  height: 32px;
}

.use-button {
  background-color: rgb(236,128,141);
  border-color: rgb(236,128,141);
  color: white;
}
</style>